<template>
  <div class="app-container">
    <div class="search-container">
      <el-container>
        <el-aside width="400px">
          <el-card>
            <template #header>
              <el-button type="success" @click="openDialog(1)">
                <template #icon>
                  <Plus />
                </template>
                新增
              </el-button>
            </template>
            <el-table :data="linkData">
              <el-table-column
                v-for="column in linkColumns"
                :key="column.key"
                :label="column.label"
                :prop="column.prop"
              >
                <template #default="scope">
                  <el-link
                    type="success"
                    v-if="column.key === 'describes'"
                    :href="scope.row[column.prop]"
                    target="_blank"
                  >
                    链接
                  </el-link>
                  <span v-else>{{ scope.row[column.prop] }}</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="150">
                <template #default="scope">
                  <el-button
                    type="primary"
                    size="small"
                    link
                    @click="openDialog(scope.row.id)"
                  >
                    <template #icon>
                      <Edit />
                    </template>
                    编辑
                  </el-button>
                  <el-button
                    type="danger"
                    size="small"
                    link
                    @click="handleDelete(scope.row.id)"
                  >
                    <template #icon>
                      <Delete />
                    </template>
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-aside>
        <el-container>
          <el-header>
            <el-card>
              <el-anchor :offset="70" direction="horizontal">
                <el-anchor-link
                  v-for="(link, index) in options.value"
                  :key="index"
                  :href="'#' + link.name"
                  :title="link.name"
                ></el-anchor-link>
              </el-anchor>
            </el-card>
          </el-header>
          <el-main>
            <el-card>
              <div v-for="main in pageData" :key="main.id">
                <span v-if="main.id === 1"></span>
                <el-card :id="main.name" v-else>
                  <template #header>
                    <span style="font-size: 20px">{{ main.name }}</span>
                    <el-button type="success" @click="openDialog(main.id)">
                      <template #icon>
                        <Plus />
                      </template>
                      新增
                    </el-button>
                  </template>
                  <el-table :data="main.children">
                    <el-table-column
                      v-for="card in carData"
                      :prop="card.prop"
                      :label="card.label"
                    ></el-table-column>
                    <el-table-column fixed="right" label="操作" width="150">
                      <template #default="scope">
                        <el-button
                          type="primary"
                          size="small"
                          link
                          @click="openDialog(scope.row.id)"
                        >
                          <template #icon>
                            <Edit />
                          </template>
                          编辑
                        </el-button>
                        <el-button
                          type="danger"
                          size="small"
                          link
                          @click="handleDelete(scope.row.id)"
                        >
                          <template #icon>
                            <Delete />
                          </template>
                          删除
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-card>
              </div>
            </el-card>
          </el-main>
          <el-footer>
            <el-card>尾部区域（其他信息）</el-card>
          </el-footer>
        </el-container>
        <!--        <el-aside width="400px">-->

        <!--      </el-aside>-->
      </el-container>
    </div>
    <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
      width="500px"
      @close="closeDialog"
    >
      <el-form ref="dialogRef" :model="dialogFrom" label-width="100px">
        <el-form-item
          v-for="field in dialogData"
          :key="field.prop"
          :label="field.label"
          :prop="field.prop"
        >
          <template v-if="field.prop === 'pid'">
            <el-select v-model="dialogFrom[field.prop]">
              <el-option
                v-for="item in options.value"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </template>
          <template v-else>
            <el-input
              v-model="dialogFrom[field.prop]"
              :placeholder="field.label"
            />
          </template>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit()">确定</el-button>
          <el-button @click="closeDialog()">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
defineOptions({
  name: "Note",
  inheritAttrs: false,
});
import NoteAPI from "@/api/test/note.js";

const queryParams = reactive({
  current: 1,
  size: 10,
});

const options = reactive([]);
const pageData = ref([]);
/*左侧链接数据*/
const linkData = ref([]);
const linkColumns = ref([
  { key: "name", label: "名称", prop: "name" },
  { key: "describes", label: "url", prop: "describes" },
]);
const dialogFrom = reactive({});
const dialogData = ref([
  { key: "pid", label: "父级菜单", prop: "pid" },
  { key: "name", label: "名称", prop: "name" },
  { key: "describes", label: "请求URL", prop: "describes" },
]);
const carData = ref([
  { key: "name", label: "名称", prop: "name" },
  { key: "describes", label: "具体操作", prop: "describes" },
  { key: "other", label: "额外操作", prop: "other" },
]);
// 弹窗
const dialog = reactive({
  title: "",
  visible: false,
});

// 请求数据
function handleQuery() {
  NoteAPI.getPage(queryParams).then((res) => {
    linkData.value = res[0].children;
    pageData.value = res;
    options.value = res.map((item) => ({
      id: item.id,
      name: item.name,
    }));
    console.log(options);
  });
}

/*关闭弹窗*/
function closeDialog() {
  dialog.visible = false;
}

function handleSubmit(id) {
  dialog.visible = false;
  console.log("提交", dialogFrom);
  NoteAPI.add(dialogFrom).then((res) => {
    ElMessage.success("添加成功");
  });
}

function handleDelete(id) {
  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(
    () => {
      loading.value = true;
      NoteAPI.deleteByIds(ids)
        .then(() => {
          ElMessage.success("删除成功");
          handleResetQuery();
        })
        .finally(() => (loading.value = false));
    },
    () => {
      ElMessage.info("已取消删除");
    }
  );
}

/*链接编辑按钮*/
function openDialog(id) {
  console.log(id);
  dialog.visible = true;
  if (id > 10) {
    dialog.title = "编辑数据";
  } else {
    dialog.title = "新增数据";
  }
}

onMounted(() => {
  handleQuery();
});
</script>
